<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getQingJingDUiHuaApi, tijiaoduihuadeApi } from '/api/request.js';
const props = defineProps({});
const platform = ref({});
const query = ref({
    qb_id: '',
    la: true,
    trigger: false,
    total: 1,
    index: 0
});
const list = ref(null);
onLoad((e) => {
    query.value.qb_id = e.id;
    query.value.title = e.title;
});
const dati = ref([]);
const fetchList = async (type = true) => {
    try {
        uni.showLoading({
            mask: true
        });
        let res = await getQingJingDUiHuaApi(query.value);
        if (!type || !list.value) {
            list.value = [];
        }
        res.data.list.map((item) => {
            item.image = `http://zhangyu.aizhangyu.cn${item.image}`;
            list.value.push(item);
        });
        console.log(list.value);
        query.value.total = res.data.count;
        if (query.value.page * 10 >= query.value.total) {
            query.value.la = false;
        } else {
            query.value.la = true;
        }
    } catch (error) {
        console.log(error);
    }
};
onShow(async () => {
    if (!list.value || list.value.length < 1) {
        fetchList(false).finally(() => {
            uni.hideLoading();
        });
    }
    platform.value = uni.getStorageSync('platform');
});
const goback = () => {
    uni.navigateBack();
};
const showStatus = ref(false);
const timer = ref(null);

const showResult = ref(false);
const next = async () => {
    if (dati.value.length != list.value.length) {
        uni.showToast({
            title: '情景对话未全部完成',
            icon: 'none'
        });
        return;
    }
    let res = await tijiaoduihuadeApi({
        qb_id: query.value.qb_id,
        question_ids: list.value.map((item) => item.id).join(',')
    });
    uni.showToast({
        title: res.msg,
        icon: 'none'
    });
    if (res.code == 1) {
        showResult.value = true;
    }
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> {{ showResult ? '报告解析' : '情景对话' }} </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <scroll-view
            v-if="!showResult && list && list.length"
            scroll-y="true"
            class="body"
            :style="{
                height: platform.gaodu - platform.dingbu - 96 - 48 - 186 - 196 + 'rpx'
            }"
        >
            <view class="title"> 参考图片情景,填入空白处的最佳答案 </view>
            <view class="list">
                <template v-for="(item, index) in list" :key="index">
                    <view class="item">
                        <view class="img-cen">
                            <image mode="widthFix" :src="item.image"></image>
                        </view>
                        <template v-if="!item.answer_first">
                            <view class="xinde uni-row">
                                {{ index + 1 }}. <input type="text" v-model="dati[index]" />
                            </view>
                        </template>
                        <template v-else>
                            <view class="label"> {{ index + 1 }}. {{ item.answer_first }} </view>
                        </template>
                        <template v-if="!item.answer_second">
                            <input style="margin-left: 30rpx" type="text" v-model="dati[index]" />
                        </template>
                        <template v-else>
                            <view style="margin-left: 30rpx" class="label">
                                {{ item.answer_second }}
                            </view>
                        </template>
                    </view>
                </template>
                <view class="" style="height: 300rpx"> </view>
            </view>
            <view class="btn uni-row" @click="next"> 批改 </view>
        </scroll-view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
        <view class="waisss" v-if="showResult && list && list.length">
            <view class="listss">
                <view class="item" v-for="(item, index) in list" :key="index">
                    {{ index + 1 }}. 答案解析: {{ item.analysis }}
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="less">
.wai {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 46rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 36rpx 0 56rpx;
    }

    .footer {
        &.active {
            justify-content: space-around;
        }

        &.default {
            justify-content: center;
        }

        .bt {
            width: 184rpx;
            height: 68rpx;
            font-size: 24rpx;
            line-height: 68rpx;
            border-radius: 36rpx;
        }

        .fou {
            color: #9561f3;
            border: 2rpx solid #9561f3;
        }

        .shi {
            background: #9561f3;
            color: #fff;
        }
    }
}

.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        padding: 0 28rpx 0;

        .item {
            align-items: flex-start;
            padding: 20rpx 0;

            .img-cen {
                text-align: center;
                margin-bottom: 20rpx;

                image {
                    flex-shrink: 0;
                    width: 300rpx;
                }
            }

            input {
                flex: 1;
                border-bottom: 4rpx solid #333;
                font-size: 28rpx;
                padding: 0;
                font-size: 28rpx;
                margin-right: 20rpx;
            }

            .label {
                margin: 20rpx 0;
                font-size: 28rpx;
            }
        }

        .title {
            font-weight: 500;
            padding-top: 20rpx;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 30rpx;
        }

        .labels {
            font-size: 28rpx;
            color: #ef4828;
        }

        .titles {
            margin-top: 50rpx;
            font-size: 28rpx;
            // color: #333333;
            color: #ef4828;
            margin-bottom: 10rpx;
        }

        .list {
            margin-top: 20rpx;

            .item {
                align-items: flex-start;
                padding: 20rpx 0;

                image {
                    flex-shrink: 0;
                    width: 200rpx;
                }

                .lefts {
                    align-items: flex-start;
                    flex: 1;

                    .left {
                        flex: 1;

                        input {
                            border-bottom: 4rpx solid #333;
                            display: inline-block;
                            font-size: 28rpx;
                            padding: 0;
                            font-size: 28rpx;
                            margin-right: 20rpx;
                        }

                        .label {
                            margin: 20rpx 0;
                            font-size: 28rpx;
                        }
                    }
                }
            }

            .left-name {
                display: inline;
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                vertical-align: text-bottom;
            }
        }

        .btn {
            position: fixed;
            bottom: 40rpx;
            left: 28rpx;
            right: 28rpx;
            height: 88rpx;
            justify-content: center;
            background: #9561f3;
            border-radius: 16rpx;
            font-size: 32rpx;
            color: #ffffff;
        }
    }

    .wais {
        padding-top: 60rpx;

        .list {
            display: grid;
            padding: 0 54rpx;
            justify-content: space-around;
            grid-template-columns: repeat(5, 80rpx);
            gap: 20rpx;
        }

        .list .item {
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #22be55;
            width: 80rpx;
            height: 80rpx;
            background: #defde9;
            border-radius: 50%;

            &.active {
                color: #22be55;
                background: #defde9;
            }

            &.default {
                color: #fa7474;
                background: #ffe9e9;
            }
        }
    }
}

.waisss {
    padding-top: 60rpx;

    .listss {
        padding: 0 28rpx;

        .item {
            line-height: 40rpx;
            font-size: 28rpx;
            margin-bottom: 30rpx;
        }
    }
}
</style>
